<template>
    <div class="body">
        <el-form :model="mdl" ref="ruleForm" label-width="130px">
            <el-form-item :label="$i18n.t('CONTACT_NAME')" required :error="errors.name">
                <el-input v-model="mdl.name" :placeholder="$i18n.t('PLEASE_INPUT', { value: $i18n.t('CONTACT_NAME') })"></el-input>
            </el-form-item>
            <el-form-item :label="$i18n.t('CONTACT_PHONE')" required :error="errors.phone">
                <el-input v-model="mdl.phone" :placeholder="$i18n.t('PLEASE_INPUT', { value: $i18n.t('CONTACT_PHONE') })" :disabled="mdl.add_type === 1"></el-input>
            </el-form-item>
            <el-form-item :label="$i18n.t('NUMBER_TYPE')" required :error="errors.number_type">
                <el-select v-model="mdl.number_type" :value="mdl.number_type" style="width: 100%">
                    <el-option v-for="(option, index) in ContactNumberTypeList" :label="option.label" :value="option.value" :key="index"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item :label="$i18n.t('CONTACT_RELATION')" required :error="errors.relation">
                <el-select v-model="mdl.relation" :value="mdl.relation" style="width: 100%">
                    <el-option v-for="(option, index) in ContactRelationList" :label="option.label" :value="option.value" :key="index"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item :label="$i18n.t('REMARK')">
                <el-input v-model="mdl.remark" type="textarea" :rows="4" :placeholder="$i18n.t('PLEASE_INPUT', { value: $i18n.t('REMARK') })"></el-input>
            </el-form-item>
            <el-form-item :error="errors.submit">
                <el-button type="primary" @click="submitForm('ruleForm')" :loading="submitLogin" :disabled="btnDisable">{{ $i18n.t('SUBMIT') }}</el-button>
                <el-button @click="handleCloseDrawer">{{ $i18n.t('CANCEL') }}</el-button>
            </el-form-item>
            <el-form-item v-if="errorMessage !== ''">
                <Alert type="error" show-icon>{{ errorMessage }}</Alert>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: 'ContactFormModal',
        props: {
            mdl: {
                type: Object,
                required: true
            },
            handleCloseDrawer: {
                type: Function,
                required: true
            }
        },
        watch: {
            mdl: {
                handler () {
                    this.btnDisable = false
                },
                deep: true
            }
        },
        data () {
            return {
                rules: {},
                errors: {
                    name: '',
                    phone: '',
                    relation: '',
                    number_type: ''
                },
                submitLogin: false,
                btnDisable: true,
                errorMessage: ''
            }
        },
        computed: {
            ContactNumberTypeList () {
                return this.$store.getters.options.ContactNumberTypeList
            },
            ContactRelationList () {
                return this.$store.getters.options.ContactRelationList
            }
        },
        methods: {
            submitForm () {
                this.$emit('submit')
            }
        }
    }
</script>

<style lang="less" scoped>
.body {
    padding-right: 25px;
}
/deep/ .el-checkbox__label {
    font-size: 12px;
}
</style>
